<template>
  <div class="login">
    <el-row class="login-main">

      <el-col class="login-box">
        <h2 class="login-title">欢迎登录</h2>
        <el-form ref="form"
                 class="myform"
                 :model="form"
                 label-position="left"
                 label-width="80px">
          <el-form-item label="用户名"
                        prop="username">
            <el-input name="username"
                      clearable
                      v-model="form.username"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="登录密码"
                        prop="password">
            <el-input type="password"
                      show-password
                      name="password"
                      v-model="form.password"
                      placeholder="请输入登录密码"></el-input>
          </el-form-item>

          <el-col style="margin-top:15px;">
            <el-button class="login-btn"
                       type="primary"
                       block
                       @click="submitForm()">登录</el-button>
          </el-col>
          <el-col style="margin-top:15px;"
                  class="">
            <el-button class="login-btn"
                       type="danger"
                       block
                       @click="resetForm()">重置</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
// import withCredentialsEditorVue from '../../../VForm/variant-form/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue';
// import { reg } from '@/utils/validate';
import { default as apilogin } from '../apis/list';
export default {
    name: 'login',
    data() {
        return {
            form: {
                // username: '',
                // password: '',
            },
        };
    },
    methods: {
        ...apilogin,
        resetForm() {
            this.$refs.form.resetFields();
        },
        async submitForm() {
            let res = await this.login(this.form);
            if (res.isok == true) {
                // console.log(res);
                this.$message({
                    type: 'success',
                    message: '登录成功!',
                });
                this.$router.push({
                    path: '/list',
                });
            } else {
                this.$message({
                    type: 'error',
                    message: '你输入的账号或密码错误!',
                });
            }
            // var that = this;
            // axios
            //     .post(
            //         `http://192.168.3.136:8190/api/toLogin?username=${this.form.username}&password=${this.form.password}`
            //         // {
            //         //     withCredentials: true,
            //         // }
            //     )
            //     .then(function (res) {
            //         console.log(res);
            //         if (res.data.isok == true) {
            //             that.$message({
            //                 type: 'success',
            //                 message: '登录成功!',
            //             });
            //             localStorage.setItem('username', this.form.username);
            //             that.$router.push({
            //                 path: '/list',
            //             });
            //         } else {
            //             that.$message({
            //                 type: 'error',
            //                 message: '你输入的账号或密码错误!',
            //             });
            //             that.form.username = '';
            //             that.form.password = '';
            //         }
            //     });
        },
    },
    mounted() {},
};
</script>


<style lang="scss" >
// @import '../assets/dark.scss';
.login {
    width: 100%;
    height: 937px;
    background-color: #1b232e;
    // background-image:#4f5e74;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background-position: 0 0;
    // overflow: hidden;
    // position: relative;
    // animation: bgmove 8s 0s linear alternate both infinite;
}

@keyframes bgmove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 30% 0;
    }
}
.login-main {
    width: 100%;
    height: 100%;
    position: relative;
}

.login-box {
    width: 500px;
    height: 360px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.login-title {
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin-top: 20px;
}
.myform {
    padding: 20px;
    .el-form-item__label {
        color: #fff;
    }
    .el-input__inner {
        background: transparent;
        color: #fff;
    }
    .login-btn {
        margin-left: 40%;
    }
}
</style>